<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<!--视图部分-->
<div id="app">
  <table>
    <tr>
      <td>编号：</td>
      <td>{{user.id }}</td>
    </tr>
    <tr>
      <td>姓名：</td>
      <td>{{user.name}}</td>
    </tr>
    <tr>
      <td>年龄：</td>
      <td>{{user.age}}</td>
    </tr>
  </table>
  <input type="text" v-model="user.name">
  <input type="text" v-model="user.age">
</div>

<script src="js/vue.js"></script>
<script>
  // vue 是一个MVVM的框架，
  // 就是写前端的时候，有三个部分Model(数据)，View(视图),VM(view model)视图模型
  // 1. 数据
  var user = {
    id: 1,
    name: "张三",
    age: 23
  };

  // 2. VM(view model)视图模型：是一个Vue对象（vue的实例）
  // vm 写逻辑操作，准备数据，确定要展示的视图
  var vm  = new Vue({
    // 通过el属性来关联视图
    el: '#app',
    // 通过data属性来准备数据
    data:{
      // 这里user属性的值就是上面的user对象
      user: user
    },
    // 通过methods 属性定义方法
    methods:{

    }
  });

</script>
</body>
</html>
